
@panel-head-height: 56px;
@panel-head-bgcolor: #ccc;
@panel-body-bgcolor: #eee;
@panel-bdcolor: #ccc;


.panel-container {
  // .clearfix();
  .border-radius(0.5em);
  border: 1px solid black;  
  padding: 0px;
  margin-top: 15px;
  .box-shadow(0  1px 3px rgba(0,0,0,0.5));
  background: @panel-body-bgcolor;
  > .panel-header{
    height: @panel-head-height;
    .border-radius(0.5em 0.5em 0 0); 
    background: @panel-head-bgcolor;
    position: relative;
    width:100%;
    
    .panel-title{          
      font-size: 20px;
      padding:2px 10px;          
      border: 1px solid #333;
      //.border(0 1px 1px 1px, black);
      margin-top: -1px;
      left: 20px;
      background: @btnWarningBackgroundHighlight;
      #gradient > .vertical(@btnWarningBackgroundHighlight, @btnWarningBackground);
      //.buttonBackground(#45ad66, #defede);
      .border-radius(0 0 0.2em 0.2em);
      .box-shadow(1px  2px 1px rgba(0,0,0,0.5));
      cursor: default;
      position: absolute; 
      z-index: 100;       
    } 
    .panel-subtitle{
      font-size: 14px;
      font-weight: bold;
      padding:0px 10px;          
      border-right: 1px solid #333;
      border-bottom: 1px solid #333;
      background: yellow;
      #gradient > .vertical(@btnWarningBackground, lightyellow);
      .border-radius(0 0 0.5em 0);
      .box-shadow(1px  2px 1px rgba(0,0,0,0.5));
      cursor: default;
      position: absolute;
      left: 20px;  
      display: none;            
    }

    >.panel-tab{
      position: absolute;
      display:block;
      float:left;
      bottom: -1px; 
      left: 12px;

      // padding: 2px 6px;
      color: #fff;
      // background: black;
      
      // .border(1px 1px 0 1px, black);
      //.box-shadow(0  1px 1px rgba(255,0,0,0.5));   
      span.triangle{
        .btr(10px, #08C);        
        position: absolute;
        bottom: -10px;
        left:8px; 
      } 
      ul.nav-pills{
        margin: 0px;
        padding: 0px;
        
        li {
          &.active{
            background: #EEE;
            a{
              cursor: default;
               // b{display: block;}
               // &:hover .dropdown-menu{
                 // display: block;
//                  
               // }
            }
           
          }
          a{
            padding: 4px 6px;
            margin: 3px 8px 0px;
                  font-size: 15px;
            .border-radius(5px 5px 0 0);
             // b{display: none}
          }  
        }     
      } 
    }
  }
  .panel-line{
    float:right;
    margin-right:10px;
    // margin-top: 10px; 
  }
  > .panel-body{
    padding: 12px 3px 3px 3px;
    
    // overflow: auto;
    // .border-radius(0 0 0.5em 0.5em);
    // .border(1px 0 0 0, black);
  }
}
.view-helper{
  visibility:hidden;
  position: absolute;
  top:0px;
  left:0px;
}


